<template>
  <div class="searchFrame" style="padding: 4px 2px; border-bottom: 1px #ddd solid;">
    <span>筛选 </span>
    <a-input type="text" id="searchBoxx" v-model:value="treeData.keyword" style="width: 203px; margin-left: 2px" @change="onSearch" autocomplete="off"/>
  </div>
  <Ztree
    ref="ztreeRef"
    v-bind="attrs"
    :code="treeData.keyword"
    :nodes="treeData.data"
    :setting="treeData.setting"
    @click="onClick"
    @created="handleCreated"
    style="overflow: auto; height: 520px; width: 240px; margin-top: 0px"
  >
  </Ztree>
</template>

<script lang="ts" setup>
  import { reactive, toRaw, watch, ref } from 'vue';
  import { useAttrs } from '/@/hooks/core/useAttrs';
  import { useGlobSetting } from '/@/hooks/setting';
  import { getToken, getTenantId } from '/@/utils/auth';
  import Ztree from '/@/components/ztree/ztree.vue';
import { get } from 'sortablejs';

  const props = defineProps({
    url: { type: String, default: '/customer/asyncZtreeNode' },
    otherParams: {
      type: Object,
      default: () => ({})
    }
  });

  const emit = defineEmits(['onClick']);
  const attrs = useAttrs();
  const globSetting = useGlobSetting();
  const apiUrl = globSetting.apiUrl;
  const token = getToken();

  const ztreeRef = ref();

  //这里是自定义配置参数
  const treeData = reactive<any>({
    ztreeObj: null,
    //基本配置
    setting: {
      check: {
        enable: false,
      },
      data: {
        simpleData: {
          enable: true,
          pIdKey: 'pId',
        },
      },
      async: {
        enable: true,
        type: 'POST',
        contentType: 'application/json',
        dataType: 'json',
        url: apiUrl + props.url,
        autoParam: ['id=id'],
        headers: { 'X-Access-Token': token, 'X-Tenant-Id': getTenantId() },
        //dataFilter: filter,
      },
      view: {
        showIcon: true,
        fontCss: setFontCss,
      },
      callback: {
        // beforeAsync: beforeAsync,
        // onAsyncSuccess: onAsyncSuccess,
        // beforeClick: beforeClick,
        onClick: onClick,
      },
    },

    //树数据
    data: [],
    // 搜索 - 关建字
    keyword: '',
    // 搜索 -参数
    ztreeviewStyle: {
      fontCss: { 'font-size': '14px' },
    },
    ztreeSearch: {
      curStatus: 'init',
      curAsyncCount: 0,
      asyncForAll: false,
      goAsync: false,
    },
  });

  // 监听 searchParams 变化
  watch(
    () => props.otherParams, 
    (newParams) => {
      let otherParam = toRaw(newParams);
      console.log('customerTree data...', otherParam);
      ztreeRef.value.doSearch(otherParam);
    }, 
    { deep: true }
  );

  // 数据格式 可以是这样并列的 也可以是json嵌套的那种
  var zNodes = [
    { id: 1, pId: 0, name: '父节点 1', open: true },
    { id: 11, pId: 1, name: '叶子节点 1-1' },
    { id: 12, pId: 1, name: '叶子节点 1-2' },
    { id: 13, pId: 1, name: '叶子节点 1-3' },
    { id: 2, pId: 0, name: '父节点 2', open: true },
    { id: 21, pId: 2, name: '叶子节点 2-1' },
    { id: 22, pId: 2, name: '叶子节点 2-2' },
    { id: 23, pId: 2, name: '叶子节点 2-3' },
    { id: 3, pId: 0, name: '父节点 3', open: true },
    { id: 31, pId: 3, name: '叶子节点 3-1' },
    { id: 32, pId: 3, name: '叶子节点 3-2' },
    { id: 33, pId: 3, name: '叶子节点 3-3' },
  ];

  //TODO 初始化树
  function handleCreated(obj) {
    console.info('handleCreated');
  }

  function onClick(e, treeId, treeNode) {
    emit('onClick', treeNode);
  }

  /**
   * 文本框值变化
   */
  function onSearch() {
    console.log('onSearch');
    var params = { areaName: treeData.keyword };
    // asyncZtreeNode(params).then((res) => {
    //   try {
    //     treeData.data = res || []
    //   } catch (e) {
    //     alert('loadTree' + e)
    //     return false
    //   }
    // })
  }

  function setFontCss(treeId, treeNode) {
    return {color: treeNode.color};
  };


</script>

<style lang="less" scoped></style>
